<template>
  <div>
    <div class="side-search-container">
      <div class="blue-line mb-15">{{ $t('video.styleList') }}</div>
      <a-input-search style="width: 200px"  :placeholder=" $t('basicData.styleNo') +'、'+$t('basicData.styleNa')" enter-button v-model:value.trim="queryVal" @search="loadData(true)" />
    </div>
    <a-spin :spinning="loading">
      <div class="video-side-container" @scroll="scrollBottom">
        <div v-for="(item, index) in listData" :key="index" :class="['list-card', {'active-card' : selectMakeId == item.styleId}]" @click="onCardClick(item)">
          <a-col class="mb-2">{{index+1}}<b class="break-all">【{{item.styleNo}}】</b></a-col>
          <a-col class="one-line"> {{ $t('basicData.styleNa') }}：{{item.styleName}}</a-col>
        </div>
        <a-empty v-if="!listData.length" class="mt-50" />
      </div>
    </a-spin>
  </div>

</template>
<script setup name="videoBeatSide">
import axios from '@/utils/request'
import { onBeforeMount, ref } from 'vue'  
const props = defineProps({ 
  listUrl: {
    type: String,
    default: () => ''
  }, 
})
const emits = defineEmits(['onSelect'])
let listData = ref([])
let currentPage = ref(1)
let selectMakeId = ref(null)
let loading = ref(false) 
let noMore = ref(false)
let queryVal = ref('') 

const getQueryParams = () => {
  return {
    pageNo: currentPage.value,
    pageSize: 20,
    query: queryVal.value
  }
}
const loadData = async (reset) => {
  if (reset) {
    noMore.value = false
    currentPage.value = 1
  } 
  let params = getQueryParams()
  // 查询条件
  loading.value = true
  try {
    let res = await axios.postAction(props.listUrl, params)
    if (res.success) {
      if (res.data) {
        if (reset) {
          listData.value = res.data.list || []
          if (listData.value.length) {
            selectMakeId.value = listData.value[0].styleId
            emits('onSelect', listData.value[0])
          }
        } else {
          listData.value = [...listData.value, ...res.data.list]
        }
        noMore.value = listData.value.length >= res.data.total
      } else {
        if (reset) listData.value = []
        noMore.value = true

        selectMakeId.value = null
        emits('onSelect', { selectMakeId: null, moProcVersionVOList: [] })
      }
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
const scrollBottom = async (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.srcElement
  // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
  if (scrollTop + clientHeight >= scrollHeight) {
    if (noMore.value) return
    currentPage.value++
    await loadData()
  }
} 
const onCardClick = (record) => {
  selectMakeId.value = record.styleId
  emits('onSelect', record)
}
defineExpose({
  loadData
})
onBeforeMount(() => {
  loadData(true)
})
</script>
